<template>
  <van-overlay :show="deliveryshow" z-index="500" @tap.stop="onClickHide">
    <div class="wrapper">
      <div @tap.stop class="courier_info">
        <ul class="courier_info_box">
          <li class="courier_info_list">
            <p class="courier_info_title">快递公司</p>
            <van-field :value="courier_company" custom-style="margin-left: -30rpx;" right-icon="arrow-down" @tap="deliveryShow"	disabled placeholder="选择快递公司" />
          </li>
          <li class="courier_info_list">
            <p class="courier_info_title">快递单号</p>
            <van-field custom-style="margin-left: -30rpx;"  @change="myChange"/>
          </li>
          <li class="courier_info_button">
            <van-button round block color="#FC6941"  custom-style="height: 80rpx; font-size: 28rpx;" @click="delivery">确认</van-button>
          </li>
          <li class="courier_info_button">
            <van-button round block color="#F4F4F4" custom-style="height: 80rpx; color: #333333;font-size: 28rpx;" @click="cancel">取消</van-button>
          </li>
        </ul>
       
      </div>
      <van-action-sheet z-index="600" :show="dShow" :actions="express" @tap.stop="onClose" @select.stop="onSelect" />
    </div> 
    
  </van-overlay>
</template>

<script>
import { getExpress } from "@/api/order";
export default {
  props: [
    "deliveryshow",//是否显示发货框
    ],
  data(){
    return {
      dShow:false,
      courier_company:"",//快递公司名字
      courier_companyid:'',//快递公司id
      express:[],//快递公司数组
      deliveryId:'',//快递单号
    }
  },
  mounted() {
    // this.getExpress();
    // console.log("看看传过来的订单号对不对",this.orderid)
  },
  methods:{
    onClickHide() {
      this.$emit('shutShow', false)
    },
    deliveryShow(){
      this.getExpress();
      this.dShow=true
    },
    onClose() {
      this.dShow=false
    },
    onSelect(event) {
      this.courier_company=event.target.name;
      this.courier_companyid=event.target.id;
      // console.log("选中的快递公司信息",event.target)
    },
    //获取输入的快递单号
    myChange(e){
      // console.log("获取输入的快递单号",e);
      this.deliveryId = e.mp.detail
    },
    // 点击取消发货按钮的操作
    cancel(){
      this.onClickHide();
    },
    //点击确认填写按钮的操作
    delivery(){
      
    },
    //获取所有快递公司
    getExpress(){
      getExpress().then(res => {
        this.express=res.content
      });
    }
  },
}
</script>

<style>
  .wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
  }
  .courier_info{
    width: 540rpx;
    height: 620rpx;
    padding-left: 40rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
  }
  .courier_info_box{
    padding-top: 20rpx;
  }
  .courier_info_list{
    display: flex;
    flex-direction: column;
  }
  .courier_info_title{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #333333;
  }
  .courier_info_button{
    padding:30rpx 40rpx 0 0;
    
  }
</style>